<template>
  <div class="list group-buy">
    <div class="content">
      <div class="list-banner">
        <img src="~/assets/images/group-banner.jpg" alt />
      </div>
      <div class="goods-list group-list">
        <ProdItem :pale-list="teamBuyingList" />
        <!-- 页码 -->
        <!-- <div class="pagination">
          <div class="pages" v-if="page.pages >= 1">
            <a
              href="javascript:void(0);"
              class="item prev"
              :class="{default: page.current <= 1}"
              @click="getTeamBuyingList(page.current -1)"
            >上一页</a>
            <div v-for="(item,index) in page.rainbow" :key="index">
              <a
                href="javascript:void(0);"
                @click="getTeamBuyingList(item)"
                class="item"
                :class="{cur: page.current === item}"
                v-if="item !== '...'"
              >{{item}}</a>
              <span class="ellipsis" v-else>...</span>
            </div>

            <a
              href="javascript:void(0);"
              class="item next"
              :class="{default: page.current > page.pages - 1}"
              @click="getTeamBuyingList(page.current +1)"
            >下一页</a>
            <div class="go-page">
              到第
              <input type="text" class="page-input" />页
              <a href class="page-btn">GO</a>
            </div>
            <div class="total-num">
              共
              <span class="num">{{page.pages}}</span>条
            </div>
          </div>
        </div>-->
        <!-- /页码 -->

        <!-- 页码 -->
        <pagination v-model="current" :pages="pages" @changePage="getTeamBuyingList"></pagination>
        <!-- /页码 -->
      </div>
    </div>
  </div>
</template>

<script src='~/assets/js/load-transition'></script>
<script>
import ProdItem from '~/components/prod-item'
import PageUtil from '~/plugins/pageUtil'
import CategroySidebar from '~/components/categroy-sidebar'
import Pagination from '~/components/pagination'
export default {
  components: {
    ProdItem,
    Pagination
  },
  data () {
    return {
      teamBuyingList: [], //团购列表
      total: 0, // 总条
      pages: 0, // 总页数
      current: this.$route.query.current, // 当前页数
      size: 12, // 每页显示多少条
    }
  },
  //在页面加载之前先加载数据
  async asyncData ({ app, query }) {
    const data = await app.$axios.get('/groupProd/page', {
      params: {
        current: query.current,
        size: query.size
      }
    }).then(({ data }) => {
      // data.rainbow = PageUtil.rainbowWithDot(data.current, data.pages, 5)
      return data = data
    })
    // return {
    //   teamBuyingList: data.records,
    //   pages: data.pages,
    //   current: data.current,
    //   total: data.total
    // }
  },
  mounted () {
    // 设置网页标题
    document.title = this.$t('commonHead.groupDiscount')
    this.getTeamBuyingList() //团购列表
  },
  methods: {
    /**
     * 请求团购列表
     */
    getTeamBuyingList (current) {
      this.$axios.get('/groupProd/page', {
        params: {
          current: current,
          size: 12
        }
      })
        .then((({ data }) => {
          this.teamBuyingList = data.records
          this.pages = data.pages,
            this.current = data.current
          this.total = data.total
          // data.rainbow = PageUtil.rainbowWithDot(data.current, data.pages, 5)
          // this.page = data
        }))
    },
    /**
     * 分页
     */
    // changePage(value) {
    //   this.current = value
    //   this.getTeamBuyingList()
    // },
  },
}
</script>

<style scoped src='~/assets/css/list.css'></style>
